<template>
  <div :class="wrapper">
    <el-select v-model="currentProvince" :disabled="disabled || provinceDisabled" placeholder="省" @change="getCities">
      <el-option v-for="(item, index) in provinces" :key="index"
                 :value="item.name" :label="item.name"/>
    </el-select>
    <template v-if="!onlyProvince">
      <el-select v-model="currentCity" :disabled="disabled || cityDisabled" placeholder="市" @change="getAreas">
        <el-option v-for="(item, index) in cities" :key="index"
                   :value="item.name" :label="item.name"/>
      </el-select>
      <el-select v-if="!hideArea" v-model="currentArea" :disabled="disabled || areaDisabled" placeholder="区">
        <el-option v-for="(item, index) in areas " :key="index"
                   :value="item.name" :label="item.name"/>
      </el-select>
    </template>
  </div>
</template>

<script setup>
import {ref, watch} from "vue";
import DISTRICTS from './districts.js'

defineOptions({
  name: 'VDistpicker',
})

const props = defineProps({
  province: {type: [String, Number], default: ''},
  city: {type: [String, Number], default: ''},
  area: {type: [String, Number], default: ''},
  hideArea: {type: Boolean, default: false},
  onlyProvince: {type: Boolean, default: false},
  disabled: {type: Boolean, default: false},
  provinceDisabled: {type: Boolean, default: false},
  cityDisabled: {type: Boolean, default: false},
  areaDisabled: {type: Boolean, default: false},
  wrapper: {type: String, default: 'distpicker-address-wrapper'}
})


// const provinces = ref([])
// const cities = ref([])
// const areas = ref([])
// const currentProvince = ref('')
// const currentCity = ref('')
// const currentArea = ref('')

const optionData = reactive({
  provinces: [],
  cities: [],
  areas: [],
  currentProvince: '',
  currentCity: '',
  currentArea: ''
})
const {
  provinces,
  cities,
  areas,
  currentProvince,
  currentCity,
  currentArea
} = toRefs(optionData)


const emits = defineEmits(['province', 'city', 'area'])

watch(currentProvince, (value) => {
  emits('province', setData(value, optionData.provinces))
  if (props.onlyProvince) emit('selected')
})

watch(currentCity, (value) => {
  emits('city', setData(value, optionData.cities))
  if (props.hideArea) emit('selected')
})

watch(currentArea, (value) => {
  emits('area', setData(value, optionData.areas))
  emit('selected')
})
watch(() => props.province, (value) => {
  optionData.currentProvince = props.province
  optionData.cities = getDataList(optionData.currentProvince, optionData.provinces)
})

watch(() => props.city, (value) => {
  optionData.currentCity = props.city
  optionData.areas = getDataList(optionData.currentCity, optionData.cities)
})
watch(() => props.area, (value) => {
  optionData.currentArea = props.area
})


function created() {
  optionData.provinces = DISTRICTS
  optionData.currentProvince = getNameValue(props.province, optionData.provinces)
  optionData.cities = props.province ? getDataList(props.province, optionData.provinces) : []
  optionData.currentCity = getNameValue(props.city, optionData.cities)
  optionData.areas = props.city ? getDataList(props.city, optionData.cities) : []
  optionData.currentArea = props.getNameValue(props.area, optionData.areas)
}

created()


function setData(value, list) {
  const valueObj = list ? list.find(item => item.name === value) : null
  return valueObj ? {
    code: valueObj.code,
    value: valueObj.name
  } : {
    code: '',
    value: ''
  }
}

function emit(name) {
  const data = {
    province: setData(optionData.currentProvince, optionData.provinces)
  }

  if (!props.onlyProvince) {
    // .$set(data, 'city', setData(optionData.currentCity, optionData.cities))
    data['city'] = setData(optionData.currentCity, optionData.cities)
  }

  if (!props.onlyProvince || props.hideArea) {
    // .$set(data, 'area', setData(optionData.currentArea, optionData.areas))
    data['area'] = setData(optionData.currentArea, optionData.areas)
  }

  emits(name, data)
}

function getCities() {
  optionData.currentCity = ''
  optionData.currentArea = ''
  optionData.cities = getDataList(optionData.currentProvince, optionData.provinces)
  cleanList('areas')
  if (optionData.cities.length === 0) {
    emit('selected')
  }
}

function getAreas() {
  optionData.currentArea = ''
  optionData.areas = getDataList(optionData.currentCity, optionData.cities)
  if (optionData.areas.length === 0) {
    emit('selected')
  }
}

/**
 * 获取数据信息
 * value code/name
 * list 上一级数据
 */
function getDataList(value, list) {
  const isCode = typeof value === 'number'
  for (let index = 0; index < list.length; index++) {
    const item = list[index]
    if ((isCode && item.code === value) ||
        !isCode && item.name === value) {
      return item.children
    }
  }
}

/**
 * 获取名称值
 * value code/name
 * list 当前类型数据
 */
function getNameValue(value, list) {
  if (typeof value === 'number') {
    for (let index = 0; index < list.length; index++) {
      const item = list[index]
      if (item.code === value) {
        return item.name
      }
    }
  }
  return value
}

function cleanList(name) {
  // todo whf 这种写法看不懂
  this[name] = []
}


</script>

<script>

export default {
  props: {},
  data() {
    return {}
  },
  watch: {},
  methods: {}
}
</script>

<style lang="scss">
.distpicker-address-wrapper {
  color: #9caebf;

  .el-select {
    width: 30%;
  }

}
</style>
